<template>
    <div class="chat_page">
        <nav-bar title="即时通信" @on-cancel="handleCancelNavBar()"></nav-bar>
        <!-- <button type="button" @click="hanldeScreenshot()">截图</button> -->
        <div class="chat_content">
            <div class="chat_content_left">
                <chat-frame></chat-frame>
                <speak-layout></speak-layout>
            </div>
            <div class="chat_content_right">
                <group-layout></group-layout>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import NavBar from '@/views/components/NavBar.vue';
import AzScreenShort from '@/utils/screenshot';
import ChatFrame from './components/ChatFrame/index.vue';
import GroupLayout from './components/GroupLayout/index.vue';
import SpeakLayout from './components/SpeakLayout/index.vue';
export default{
    components:{
        NavBar,
        ChatFrame,
        GroupLayout,
        SpeakLayout
    },
    setup() {
        const methods = {
            handleCancelNavBar() {
            },
            hanldeScreenshot() {
                let tmp = new AzScreenShort();
                console.log('截图', tmp);
            }
        }
        return {
            ...methods
        }
    }
};
</script>

<style lang="scss" scoped>
.chat_page{
    height:100%;
}
.chat_content{
    display: flex;
    height: calc(100% - 60px);
    &_left{
        width: 682px;
        background: #fff;
        border-bottom-left-radius: 14px;
    }
    &_right{
        flex: 1;
        border-left: 1px solid #F1F1F1;
        border-bottom-right-radius: 14px;
        background: #F7F7F7;
    }
}
</style>
